<template>
    <div id="tmpl">
        <!--评论组件-->
        <!--1.0 实现提交评论数据到服务器的静态结构-->
        <div id="postcomment">
            <h3 >提交评论</h3>
            <p class="p"></p>
            <textarea placeholder="请输入您要评论的内容"
                      v-model="postcontent"
            ></textarea>
            <mt-button type="primary" size="large"
                       @click="postcomment"
            >发表</mt-button>
        </div>

        <!--2.0 实现获取评论数据列表-->
        <div id="list">
            <h3>评论列表</h3>
            <p class="p"></p>
        </div>
        <div
                v-for="(item,index) in list"
        >
            <div class="title">
                <span>第{{index+1}}楼</span>
                <span>用户：{{item.user_name}}</span>
                <span>发表时间：{{item.add_time | datefmt('YYYY年MM月DD日 HH:mm:ss')}}</span>
            </div>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-text="item.content"></li>
            </ul>
        </div>


        <!--3.0 加载更多按钮-->
        <mt-button type="danger" size="large" plain @click="getmore()">加载更多</mt-button>
    </div>
</template>

<script>
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';
    export default {
        props: ['id'], //作用是用来接收父组件传入过来的id值
        data() {
            return {
                pageindex:1, //代表获取api中的第几页数据
                postcontent: '', //用来自动获取用户填写的评论内容
                list:[] //评论数据的数组
            }
        },
        created() {
            //1. 获取当前资讯数据的评论信息列表
            this.getcommentlist(this.pageindex);
        },
        methods: {
            //3.0获取更多
            getmore() {
                //1. 使得页面的index值+1
              this.pageindex++;

              //2. 获取当前this.pageindex值对应的分页数据
              this.getcommentlist(this.pageindex);
            },
            //2.0 获取当前页面的评论数据 pageindex:代表的但是当前获取的是那一页的数据，默认值是1
            getcommentlist(pageindex) {
                pageindex = pageindex || 1; //如果pageindex没有值，给赋值为1
                //1.0 确定url
                var url = common.apidomain + "/GetComments?id=" + this.id + "&pageindex=" + pageindex;
                //2.0 发出ajax请求获取数据
                this.$http.get(url).then(function (response) {
                    if (response.body.status != 0) {
                        Toast(response.body.message);
                        return;
                    }
                    //实现将message数组中的数据赋值给this.list
                    this.list = this.list.concat(response.body.message);
                })
            },


            //1.0 评论数据的提交
            postcomment() {
                //0.0 判断用户是否填写评论内容
                if (this.postcontent.trim().length <= 0) {
                    Toast('您要评论的内容不能为空！');
                    return;
                }
            //    1.0 确定提交的地址
                var url = common.apidomain + '/PostComment';
                //2.0 利用ajax的post请求提交到指定地址
                //2.1 获取到用户在文本框中填写的评论内容，通过content: 内容 格式提交到请求体报文中
                this.$http.post(
                    url,
                    {content: this.postcontent}
                    // {emulateJSON: true} //加上这句会把json转换成表单，即application/www-x-
                    ).then(function (response) {
                        Toast(response.body.message);
                    //4.0 将最新的评论数据追加到评论列表的最顶部
                    this.list = [
                        {
                            "user_name": "匿名用户",
                            "add_time": new Date(),
                            "content": this.postcontent
                        }
                    ].concat(this.list);


                    //5.0将评论内容清空
                    this.postcontent = '';


                });
            }
        }
    }
</script>

<style scoped>
    /*1.0 实现提交评论样式*/
    #postcomment{
        padding: 6px;
    }
    .p {
        height: 1px;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }

    /*2.0 评论列表的样式*/
    #list {
        padding: 5px;
    }
    .title{
        padding: 5px;
        color: #6d6d72;
        font-size: 15px;
        background-color: #c8c7cc;
    }
</style>